.forum-group {
    background-color: #fff;
    margin: 10px 0;
    .group-header {
        line-height: 50px;
        border-bottom: 1px solid #333;
        padding: 0 20px;
    }
    .group-body {
        display: flex;
        align-items: baseline;
        justify-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .forum-item {
            position: relative;
            padding-left: 100px;
            height: 100px;
            width: 300px;
            transition: all 1s;
            border-bottom: 1px dotted;
            margin: 5px;
            .thumb {
                position: absolute;
                left: 0;
                width: 80px;
                height: 80px;
                img {
                    max-width: 100%;
                    height: 100px;
                }
            }
            .info {
                color: #888;
                .name {
                    line-height: 30px;
                    color: #333;
                    font-weight: 700;
                }
            }
            .last-thread {
                a {
                    color: #369;
                }
            }
            &:hover {
                box-shadow: rgba(#333, .7) 0 0 10px;
            }
        }
    }
}

.thread-list {
    .thread-item-header {
        border-bottom: 1px solid;
        display: grid;
        grid-template-columns: 1fr 105px 60px 105px;
        background-color: #fff;
        line-height: 30px;
        .count {
            font-size: 12px;
        }
    }
    .thread-item {
        border-bottom: 1px solid;
        display: grid;
        grid-template-columns: 1fr 105px 60px 105px;
        .name {
            line-height: 40px;
            .fa-fire {
                color: red;
            }
        }
        .time,
        .count,
        .reply {
            em {
                display: block;
                font-style: normal;
            }
        }
        &:hover {
            background-color: rgba(#333, .2);
        }
    }
}

.thread-box {
    .thread-title,
    .post-item {
        display: grid;
        grid-template-columns: 160px 1fr;
        .count,
        .post-user {
            background-color: #E5EDF2;
        }
        .title,
        .post-content {
            background-color: #fff;
        }
    }
    .thread-title {
        border-bottom: 4px solid #f4f4f4;
        line-height: 40px;
        .fa-fire {
            color: red;
        }
        .count {
            text-align: center;
        }
        .title {
            padding-left: 20px;
        }
    }
    .post-item {
        border-bottom: 4px solid #f4f4f4;
        .post-user {
            text-align: center;
            .avatar {
                img {
                    width: 120px;

                }
            }
        }
        .post-content .header,
        .post-user .name {
            line-height: 30px;
            border-bottom: 1px dotted #ccc;
        }
        .post-content {
            position: relative;
            padding-bottom: 30px;
            .header {
                padding: 0 20px;
                .action {
                    float: right;
                }
            }
            .content {
                padding: 0 20px;
                word-break: break-word;
                a {
                    color: #369;
                }
            }
            .last-time {
                text-align: right;
                color: #888;
            }
            .footer {
                padding: 0 20px;
                border-top: 1px dotted #888;
                position: absolute;
                width: 100%;
                bottom: 0;
                line-height: 30px;
            }
            .quote {
                background-color: #F9F9F9;
                margin: 10px 0;
                padding: 10px 35px;
                zoom: 1;
                color: #666;
                position: relative;
                overflow: hidden;
                &::before {
                    content: "“";
                    position: absolute;
                    font-size: 80px;
                    left: -45px;
                    top: -12px;
                    color: #ccc;
                }
                &::after {
                    content: "”";
                    position: absolute;
                    font-size: 80px;
                    right: -45px;
                    bottom: -53px;
                    color: #ccc;
                }
            }
        }
        &.post-new {
            .post-content {
                textarea {
                    width: 100%;
                    height: 200px;
                    resize: none;
                }
                .btn {
                    background-color: #333;
                    color: #fff;
                }
            } 
        }
    }
}

.thread-highlight {
    .name,
    .title {
        color: #a10000;
        font-weight: 700;
        a {
            color: #a10000;
        }
    }
}

.thread-new-box {
    margin: 30px 0;
    .header {
        line-height: 30px;
        background-color: #fff;
        padding-left: 20px;
    }
    .title {
        select, 
        input {
            height: 30px;
        }
        input {
            width: calc(100% - 150px);
        }
    }
    textarea {
        width: 100%;
        height: 200px;
        resize: none;
        padding: 3px;
    }
    .btn {
        background-color: #333;
        color: #fff;
    }
}

.hide-locked-node,
.hide-open-node {
    overflow: hidden;
    margin: 10px 0;
    padding: 8px 8px 8px 24px;
    border: 1px dashed #FF9A9A;
    background: #FBF1E1;
    zoom: 1;
}
.hide-locked-node {
    font-size: 12px;
}
.hide-open-node {
    background-color: transparent;
    >.node-tip {
        margin-bottom: 10px;
        color: #F66;
        font-size: 12px;
        text-align: center;       
    }
}
.file-down-node {
    margin: 10px 0;
    padding: 8px 8px 8px 24px;
    line-height: 30px;
    color: #aaa;
    p {
        &:first-child {
            color: #333;
            font-weight: 500;
        }
    }
    a {
        text-decoration:underline;
    }
}

.path {
    line-height: 40px;
}

.editor {
    .editor-plugin {
        background-color: #fff;
        .fa {
            display: inline-block;
            padding: 0 5px;
            cursor: pointer;
            line-height: 30px;
            &:hover {
                background-color: #ccc;
            }
        }
    }
}


@media (max-width: 640px) {
    .forum-group,
    .thread-list,
    .thread-new-box,
    .thread-box {
        margin-left: -15px;
        margin-right: -15px;
    }
    .thread-list {
        .thread-item-header {
            display: none;
        }
        .thread-item {
            display: block;
            .time {
                display: inline-block;
                em {
                    display: inline-block;
                }
            }
            .reply {
                display: none;
            }
            .count {
                float: right;
                em {
                    display: inline-block;
                    &::before {
                        font-weight: 900;
                        font-style: normal;
                        font-family: "Font Awesome 5 Free";
                    }
                    &:first-child {
                        &::before {
                            content: "\f4ad";
                        }
                    }
                    &:last-child {
                        &::before {
                            content: "\f06e";
                        }
                    }
                }
            }
        }
    }
    .thread-box {
        .thread-title {
            display: block;
            .count {
                display: none;
            }
        }
        .post-item {
            display: block;
            position: relative;
            .post-user {
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 99;
                background-color: transparent;
                .name {
                    border: none;
                }
                .avatar {
                    width: 40px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .post-content {
                .header {
                    padding: 0 0 0 80px;
                    font-size: 12px;
                }
                .content {
                    padding: 0 0 0 45px;
                    min-height: 40px;
                }
            }
        }
    }
    .post-new {
        .post-user {
            display: none;
        }
    }
    .path {
        margin-left: -15px;
        li {
            padding: 0;
        }
    }
}